<template>
    <div class="choose-ques-dialog">
      <el-bottom-button-dialog v-model="visible" width="25%" @on-confirm="confirm">
        <div slot="title">
          <h1 class="font-lg">选择试题</h1>
        </div>
        <div class="box-border" style="padding: 0 40px">
          <el-form>
            <el-form-item label="试题分类">
              <el-button @click="showCategoryDialog">{{checked?'已选择':'未选择'}}</el-button>
            </el-form-item>
            <el-form-item label="选题方式">
              <div>
                <el-row>
                </el-row>
                <el-row>
                  <el-col :push="8" :span="8">简单: <el-input size="mini" v-model="ques.simpleCount"/></el-col>
                  <el-col :push="8" :span="8" align="left">/ {{simpleCount}}</el-col>
                </el-row>
                <el-row>
                  <el-col :push="8" :span="8">普通: <el-input size="mini" v-model="ques.normalCount"/></el-col>
                  <el-col :push="8" :span="8" align="left">/ {{normalCount}}</el-col>
                </el-row>
                <el-row>
                  <el-col :push="8" :span="8">困难: <el-input size="mini" v-model="ques.complexCount"/></el-col>
                  <el-col :push="8" :span="8" align="left">/ {{complexCount}}</el-col>
                </el-row>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-bottom-button-dialog>
      <category-dialog @on-category-confirm="loadCategoriesCount" />
    </div>
</template>

<script>
import ElBottomButtonDialog from '../../../Common/ElBottomButtonDialog'
import CategoryDialog from './CategoryDialog'
import api from '@/api'
export default {
  mounted () {
    this.$bus.$on('show-choose-ques-dialog', (type, isAlter) => {
      this.ques.type = type
      this.ques.title = this.$converters.convertType(type)
      if (isAlter) {
        this.isAlter = true
      } else {
        this.isAlter = false
      }
      this.visible = true
    })
  },
  data () {
    return {
      isAlter: false,
      checked: false,
      ques: {
        title: '',
        type: null,
        simpleCount: 0,
        normalCount: 0,
        complexCount: 0,
        category: null
      },
      simpleCount: 0,
      normalCount: 0,
      complexCount: 0,
      visible: false
    }
  },
  methods: {
    showCategoryDialog () {
      this.$bus.$emit('toggle-category-dialog', true)
    },
    loadCategoriesCount (categories) {
      this.checked = true
      this.ques.category = categories.toString()
      api.categoryQuesCount(categories, this.ques.type)
        .then(api.commonResp((success, data) => {
          this.simpleCount = 0
          this.normalCount = 0
          this.complexCount = 0
          if (success) {
            Object.keys(data).forEach((key) => {
              let value = data[key]
              switch (key) {
                case '1':this.simpleCount = value; break
                case '2':this.normalCount = value; break
                case '3':this.complexCount = value; break
              }
            })
          }
        }))
    },
    confirm () {
      let ques = { ...this.ques }
      ques.perScore = 0
      ques.simpleCount = parseInt(ques.simpleCount)
      ques.normalCount = parseInt(ques.normalCount)
      ques.complexCount = parseInt(ques.complexCount)
      if (ques.simpleCount > this.simpleCount || ques.normalCount > this.normalCount || ques.complexCount > this.complexCount) {
        this.$message.error('选题数不可超过题目总数')
        return
      }

      if (ques.simpleCount < 0 || ques.normalCount < 0 || ques.complexCount < 0) {
        this.$message.error('选题数不能低于0')
        return
      }
      if (this.isAlter) {
        this.$bus.$emit('alter-ques', ques)
      } else {
        this.$bus.$emit('created-ques', ques)
      }
      this.visible = false
    }
  },
  components: {
    ElBottomButtonDialog,
    CategoryDialog
  }
}
</script>

<style scoped lang="less">
  .el-input{
    width: 60px;
  }
</style>
